<template>
  <div>
    <div class="top">
      <div class="fl top-left">试卷管理</div>
      <div class="fr">
        考生：<el-input style="width:200px" size="small" class="top-right" suffix-icon="el-icon-search" clearable v-model="tiaojian.name" @input="getData()" placeholder="请输入考生的姓名" />
        考场：<el-input style="width:200px" size="small" class="top-right" suffix-icon="el-icon-search" clearable v-model="tiaojian.examName" @input="getData()" placeholder="请输入考场的名称" />
        分数：<el-input style="width:200px" size="small" class="top-right" suffix-icon="el-icon-search" clearable v-model="tiaojian.score" @input="getData()" placeholder="请输入最低分数" />
      </div>
    </div>
    <div class="body">
      <div class="head">
        <div class="fl">考核年限：</div>
        <el-date-picker
          style="width:150px;margin-right:20px"
          size="mini"
          value-format="yyyy"
          v-model="tiaojian.year"
          @change="getData()"
          type="year"
          placeholder="选择年">
        </el-date-picker>
        <div class="fl">级别：</div>
        <el-cascader
          filterable
          style="width:400px;margin-right:20px"
          size="mini"
          v-model="tiaojians"
          :options="type_all"
          :props="{ checkStrictly: true, expandTrigger: 'hover' }"
          @change="getData()"
          clearable>
        </el-cascader>
        <!-- <el-button type="primary" size="small" @click="getData()">重置</el-button>
        <el-button type="primary" size="small" @click="getData()">查询</el-button> -->
      </div>

      <el-table
        max-height="600px"
        :header-cell-style="{
          'background-color': '#FAFAFA',
          'height': '54px',
          'color': '#000000',
          'font-size': '14px',
          'font-weight': 'bold'
      }"
        :data="tableData"
        size="mini"
        empty-text="暂无数据"
        stripe
        style="width: 100%">
        <el-table-column
          label="考核日期"
          align="center"
          width="150">
            <template slot-scope="scope">
              <span :title="scope.row.examBirefVo.computerStartDatetime" class="shenglue">{{scope.row.examBirefVo.computerStartDatetime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="考核名称">
            <template slot-scope="scope">
              <span :title="scope.row.examBirefVo.name" class="shenglue" v-html="scope.row.examBirefVo.name1"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="考生姓名"
          align="center"
          width="100">
            <template slot-scope="scope">
              <span :title="scope.row.examineeName" class="shenglue" v-html="scope.row.examineeName1"> </span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          width="100">
            <template slot-scope="scope">
              <el-tag style="min-width:50px" size="mini" v-if="scope.row.totalScore>=scope.row.examBirefVo.excellentScore" type="danger">优秀</el-tag>
              <el-tag style="min-width:50px" size="mini" v-else-if="scope.row.totalScore>=scope.row.examBirefVo.greatScore" type="success">良好</el-tag>
              <el-tag style="min-width:50px" size="mini" v-else-if="scope.row.totalScore>=scope.row.examBirefVo.qualifyScore">及格</el-tag>
              <el-tag style="min-width:50px" size="mini" v-else type="info">不及格</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="考核成绩"
          align="center"
          width="300">
            <template slot-scope="scope">
              <div :title="scope.row.computerScore" class="shenglue fl" style="width:100px">客观题：{{scope.row.computerScore||'0'}}分</div>
              <div :title="scope.row.computerScore" class="shenglue fl" style="width:80px">主观题：{{scope.row.practiceScore||'0'}}分</div>
              <div :title="scope.row.computerScore" class="shenglue fl" style="width:100px">总分：<span style="color:#409EFF">{{scope.row.totalScore||'0'}}</span>分</div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          align="center"
          width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="xiugai(scope.row);index=scope.$index" title="查看详情并修改">修改</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <div style="width:100%;height:30px;margin-top: 24px;">
        <el-pagination
          style="float:right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :hide-on-single-page="false"
          :current-page="tiaojian.page"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="tiaojian.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import $http from '@/utils/request'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      dialogFormVisible: false,
      span1: 5,
      span2: 7,
      tiaojians: [],
      type_all: [],
      tableData: [],
      total: 0,
      tiaojian: {
        page: 1,
        size: 10,
        name: '', // 考生名称
        examName: '', // 考场名字
        score: '', // 最低分数
        status: '',
        year: '',
        rankId: '', // 级别id
        departmentId: '', //部门id
        positionId: '', // 岗位id
        professionId: '' // 专业id
      },
      form: {
        name: ''
      }
    }
  },
  watch: {
    'form.name' () {
      this.getZhuanye()
    }
  },
  mounted() {
    this.getData()
    this.getAll()
  },
  methods: {
    getStyle(val) {
      // let str = 'background-color: rgba(225, 241, 255, 1);'
      let str = 'border: 1px solid rgba(24, 144, 255, 1);'
      if(val==1) {
        str = 'border: 1px solid rgba(24, 144, 255, 1);'
      }
      if(val==2) {
        str = 'border: 1px solid rgba(217, 217, 217, 1);'
      }
      return str
    },
    getData() {
      this.tiaojian.rankId = this.tiaojians.length > 0?this.tiaojians[0]:''
      this.tiaojian.departmentId = this.tiaojians.length > 1?this.tiaojians[1]:''
      this.tiaojian.positionId = this.tiaojians.length > 2?this.tiaojians[2]:''
      this.tiaojian.professionId = this.tiaojians.length > 3?this.tiaojians[3]:''
      $http.get('/examinee/score/list', {params:this.tiaojian}).then(response => {
        if (response.success) {
          let name = '<span style=\"color:red\">' + this.tiaojian.name + '</span>'
          let name1 = '<span style=\"color:red\">' + this.tiaojian.examName + '</span>'
          let table = []
          let query = {}
          let str = ''
          let str1 = ''
          for (let i = 0; i < response.data.list.length; i++) {
            let query = response.data.list[i]
            query.examineeName1 = query.examineeName
            query.examBirefVo.name1 = query.examBirefVo.name
            if (this.tiaojian.name !== '') {
              str = response.data.list[i].examineeName.replace(this.tiaojian.name, name)
              query.examineeName1 = '<span>' + str + '</span>'
            }
            if (this.tiaojian.examName !== '') {
              str1 = response.data.list[i].examBirefVo.name.replace(this.tiaojian.examName, name1)
              query.examBirefVo.name1 = '<span>' + str1 + '</span>'
            }
            table.push(query)
          }
          this.tableData = table
          this.total = response.data.total
        } else  {
          this.tableData = []
          this.total = 0
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    getAll() {
      $http.get('/examinee/grade/get/all').then(response => {
        if (response.success) {
          // let table = []
          // for(let i = 0; i < response.data.length; i++) {
          //   table.push({
          //     name: response.data[i].name,
          //     id: response.data[i].id,
          //     value: response.data[i].id,
          //   })
          // }
          this.type_all = response.data
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    
    
    xiugai() {
    },
    submit() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tiaojian.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tiaojian.page = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
  margin-bottom: 20px;
  width:100%;
  height: 32px;
  display: flex;
  align-items: center;
}
.label{
  margin-right: 9px;
  min-width: 87px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid rgba(24, 144, 255, 1);
  font-size: 14px;
  color: rgba(24, 144, 255, 1);
}
.top{
  width:100%;
  // height: 40px;
  padding-bottom: 20px;
  background-color: white;
}
.top-left{
  line-height:30px;
  font-size: 20px;
  color: #333333;
}
.top-right{
  width: 272px;
  line-height:30px;
}
.body{
  margin:24px 0 30px 24px;
  padding: 20px 32px 24px 32px;
  width: calc(100% - 48px);
  // height: calc(100vh - 0px);
  background-color: white;
}
.card{
  margin-bottom: 12px;
  width:100%;
  height: 147px;
  padding: 22px 14px 18px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}
</style>
